<template>
    <div class="device-data">
        <!-- 筛选项 -->
        <div class="screening">
            <el-row class="device-data_row device-data_row--filter" type="flex">
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.apptype"
                           placeholder="品类">
                    <el-option
                            v-for="{ value, label } in categorySelect"
                            :key="value"
                            :label="label"
                            :value="value">
                    </el-option>
                </el-select>
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.model_type" placeholder="型号">
                    <el-option
                            v-for="item in sN8List"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select class="filter-item" @change="_provinceChange" clearable filterable v-model="paramsDft.province_name"
                           placeholder="省">
                    <el-option
                            v-for="item in provinceList"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-select class="filter-item" clearable filterable @change="screeningChange"
                           v-model="paramsDft.city_name" placeholder="市">
                    <el-option
                            v-for="item in cityListByProvince"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <!--<el-select class="filter-item" disabled filterable v-model="paramsDft.apptype" placeholder="对比">-->
                <!--<el-option-->
                <!--v-for="{ value, label } in categorySelect"-->
                <!--:key="value"-->
                <!--:label="label"-->
                <!--:value="value">-->
                <!--</el-option>-->
                <!--</el-select>-->
            </el-row>
            <el-row class="device-data_row device-data_row--filter">
                <el-radio-group @change="timeRadioChange" v-model="paramsDft.timeType">
                    <el-radio label="1" border>当天</el-radio>
                    <el-radio label="2" border>近7天</el-radio>
                    <el-radio label="3" border>近30天</el-radio>
                    <el-radio label="4" border>自定义</el-radio>
                </el-radio-group>
                <el-date-picker
                        style="margin-left: 15px"
                        v-if="paramsDft.timeType == '4'"
                        class="filter-item"
                        v-model="paramsDft.dateRange"
                        type="daterange"
                        @change="dataPickerChange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-row>
        </div>
        <!-- 核心指标 -->
        <div class="core-index" v-loading="modeLoading.coreIndexLoading">
            <core-index :coreIndexData="coreIndexData"></core-index>
        </div>
        <!-- 激活率/设备活跃率曲线图 -->
        <div class="device-activation"  v-loading="modeLoading.deviceActivationloading">
            <device-activation name="激活率/设备活跃率曲线图" :deviceChartData="deviceActivationData"
            >
                <div slot="timeSelect">
                    <time-select
                            keyNmae="deviceActivation"
                            :value="timeSelectMap._getpluginLaunchRate"
                            :valuedefault="['日','月']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
            </device-activation>
        </div>
        <!-- 插件启动曲线及趋势图 -->
        <div class="device-bind"  v-loading="modeLoading.pluginLaunchLoading">
            <device-bind :pluginLaunchData="pluginLaunchData">
                <div slot="timeSelect">
                    <time-select
                            keyNmae="pluginLaunch"
                            :value="timeSelectMap._getPluginLaunch"
                            :valuedefault="['日','月','年']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
            </device-bind>
        </div>
        <!-- 使用时间点 -->
        <div class="device-activation"  v-loading="modeLoading.pluginUsageTimeLoading">
            <device-activation name="使用时间点" :deviceChartData="pluginUsageTimeData">
                <div slot="timeSelect">
                    <time-select
                            keyNmae="pluginUsageTime"
                            :value="timeSelectMap._getPluginUsageTime"
                            :valuedefault="['日','月','年']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
            </device-activation>
        </div>
        <!-- 页面统计 -->
        <div class="device-snb" v-loading="modeLoading.pluginPageStatisticsLoading">
            <device-snb :pluginPageStatistics="pluginPageStatisticsData"></device-snb>
        </div>
        <!-- 页面浏览图 -->
        <div class="page-browse" v-loading="modeLoading.pluginPageBrowseLoading">
            <page-browse name="页面浏览图" :pageBrowseData="pageBrowseData">
                <div slot="timeSelect">
                    <time-select
                            keyNmae="pageBrowse"
                            :value="timeSelectMap._getPluginPageBrowse"
                            :valuedefault="['日','月','年']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
            </page-browse>
        </div>
        <!-- APP功能使用数据 APP使用时段\时长 -->
        <div class="function-use"  v-loading="modeLoading.functionUserLoading">
            <function-use :functionUserData="functionUserData"></function-use>
        </div>
        <!-- 页面浏览柱状及趋势图 -->
        <div class="function-bar-chart" v-loading="modeLoading.pluginPageBrowseTendencyLoading">
            <function-bar-chart name="页面浏览柱状及趋势图" :barChartData="pluginPageBrowseTendencyData">
                <div slot="timeSelect">
                    <time-select
                        keyNmae="pluginPageBrowseTendency"
                        :value="timeSelectMap._getPluginPageBrowseTendency"
                        :valuedefault="['日','月','年']"
                        :timeChange="timeSelectChange"></time-select>
                </div>
            </function-bar-chart>
        </div>
        <!-- 时间段浏览柱状及趋势图 -->
        <div class="menu-bar-chart" v-loading="modeLoading.pluginTimeBrowseTendencyLoading">
            <function-bar-chart name="时间段浏览柱状及趋势图" :barChartData="pluginTimeBrowseTendencyData">
                <div slot="timeSelect">
                    <time-select
                            keyNmae="pluginTimeBrowseTendency"
                            :value="timeSelectMap._getPluginTimeBrowseTendency"
                            :valuedefault="['日','月','年']"
                            :timeChange="timeSelectChange"></time-select>
                </div>
            </function-bar-chart>
        </div>
    </div>

</template>

<script>
import commonMixin from '@/mixins/common'
import { categorySelect } from '@/utils/consts'
import CoreIndex from './core-index'
import DeviceActivation from './device-activation'
import DeviceBind from './device-bind'
import FunctionUse from './function-use'
import FunctionBarChart from './function-bar-chart'
import ProportionOf4 from './proportion-of-4'
import DeviceSnb from './device-snb'
import TimeSelect from './component/timeSelect'
import PageBrowse from './page-browse'
import moment from 'moment'

export default {
  components: {
    CoreIndex,
    DeviceActivation,
    DeviceBind,
    FunctionUse,
    FunctionBarChart,
    ProportionOf4,
    DeviceSnb,
    TimeSelect,
    PageBrowse
  },
  mixins: [commonMixin],
  created () {
  },
  data () {
    return {
      sN8model_type: '',
      categoryValue: '',
      categorySelect: categorySelect, // 品类
      provinceList: [],
      cityListByProvince: [],
      sN8List: [],
      timeSelectMap: {
        '_getpluginLaunchRate': 'day', // 获取 激活率/设备活跃率曲线图
        '_getPluginLaunch': 'day', // 插件启动曲线及趋势图
        '_getPluginUsageTime': 'day', // 使用时间点
        '_getDeviceWorkTimeData': 'day', // 运作时间使用数据
        '_getPluginPageBrowse': 'day', //
        '_getPluginTimeBrowseTendency': 'day', //
        '_getPluginPageBrowseTendency': 'day'//
      },
      paramsDft: {
        timeType: '2',
        dateRange: '',
        model_type: '', // 型号
        province_name: '', // 省份
        city_name: '', // 城市
        apptype: '', // 品类
        sn8: '', // sn8
        start_day: moment().add('-7', 'days').format('YYYY-MM-DD'), // 开始日期
        end_day: moment(new Date()).format('YYYY-MM-DD')// 结束日期
      },
      modeLoading: {
        coreIndexLoading: false,
        deviceActivationloading: false,
        pluginLaunchLoading: false,
        functionUserLoading: false,
        functionBarChartLoading: false,
        menuBarChartLoading: false,
        timePointLoading: false,
        proportionLoading: false,
        pluginUsageTimeLoading: false,
        pluginPageStatisticsLoading: false,
        pluginPageBrowseLoading: false,
        pluginTimeBrowseTendencyLoading: false,
        pluginPageBrowseTendencyLoading: false
      },
      coreIndexData: {}, // 核心数据
      deviceActivationData: {}, // 设备激活率/设备活跃率曲线图
      pluginLaunchData: {}, // 插件启动曲线及趋势图
      pluginUsageTimeData: {}, // 使用时间点
      pluginPageStatisticsData: {}, // 页面统计
      functionUserData: {
        timeDataList: []
      }, // 功能使用数据
      functionBarChartData: [], // 功能柱状图
      menuBarChartData: [], // 菜单柱状图
      timePointData: [], // 使用时间点
      pluginPageBrowseTendencyData: [],
      pluginTimeBrowseTendencyData: [],
      pageBrowseData: {}

    }
  },
  mounted () {
    // 获取省份
    this._getProvinceList()
    // 获取sn8
    this._getSN8List()
    // 初始化页面
    this._initPage()
  },
  methods: {
    /**
             * 初始化页面
             * @returns {Promise<void>}
             * @private
             */
    _initPage () {
      // 核心指标
      this._getDeviceCoreData()
      // 获取 激活率/设备活跃率曲线图 暂无数据
      this._getpluginLaunchRate()
      // 插件启动曲线及趋势图
      this._getPluginLaunch()
      // 使用时间点
      this._getPluginUsageTime()
      // 页面统计
      this._getPluginPageStatistics()
      // 页面浏览图
      this._getPluginPageBrowse()
      // APP功能使用数据
      this._getPluginModeData()
      // 页面浏览柱状及趋势图
      this._getPluginPageBrowseTendency()
      // 时间段浏览柱状及趋势图
      this._getPluginTimeBrowseTendency()
    },
    paramsFilter (paramsArr) {
      let params = {}
      this._.each(paramsArr, (item) => {
        if (this.paramsDft[item]) {
          params[item] = this.paramsDft[item]
        }
      })
      return params
    },
    /**
             * 筛选项更改
             * @returns {Promise<void>}
             * @private
             */
    screeningChange () {
      this._initPage()
    },
    /**
             * 时间单选项
             * @returns {Promise<void>}
             * @private
             */
    timeRadioChange () {
      let timeMap = {
        // 当日
        'time-1': {
          start_day: moment(new Date()).format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        },
        // 近7天
        'time-2': {
          start_day: moment().add('-7', 'days').format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        },
        // 近30天
        'time-3': {
          start_day: moment().add('-30', 'days').format('YYYY-MM-DD'),
          end_day: moment(new Date()).format('YYYY-MM-DD')
        }
      }
      this.paramsDft.start_day = timeMap['time-' + this.paramsDft.timeType].start_day
      this.paramsDft.end_day = timeMap['time-' + this.paramsDft.timeType].end_day
      this.screeningChange()
    },
    dataPickerChange (time) {
      if (this.paramsDft.timeType === '4') {
        this.paramsDft.start_day = time[0]
        this.paramsDft.end_day = time[1]
        this.screeningChange()
      }
    },
    timeSelectChange (type, timeType) {
      // 可以进行日/月/年筛选的
      let getFucntionType = {
        deviceActivation: '_getpluginLaunchRate',
        pluginLaunch: '_getPluginLaunch',
        pluginUsageTime: '_getPluginUsageTime',
        pageBrowse: '_getPluginPageBrowse',
        pluginPageBrowseTendency: '_getPluginPageBrowseTendency',
        pluginTimeBrowseTendency: '_getPluginTimeBrowseTendency'
      }
      if (getFucntionType[type]) {
        this.timeSelectMap[getFucntionType[type]] = timeType
        this[getFucntionType[type]]()
      }
    },
    /**
             * 获取省份
             * @returns {Promise<void>}
             * @private
             */
    async _getProvinceList () {
      let { data: res } = await this.$http.get(this.getApiUrl('dataanalysis/common/getProvinceList', false))
      if (res.code === 0) {
        this.provinceList = res.data
      }
    },
    _provinceChange (e) {
      if (e) {
        this._getCityListByProvince(e)
        this._initPage()
      }
    },
    /**
             * 获取市
             * @returns {Promise<void>}
             * @private
             */
    async _getCityListByProvince (city) {
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis/common/getCityListByProvince?province_name=${city}`, false))
      if (res.code === 0) {
        this.cityListByProvince = res.data
      }
    },
    /**
             * 获取sn8
             * @returns {Promise<void>}
             * @private
             */
    async _getSN8List () {
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis/common/getSN8List`, false))
      if (res.code === 0) {
        this.sN8List = res.data
      }
    },
    /**
             * 获取核心指标数据
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceCoreData () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.coreIndexLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginCoreData`, false), {
        params: params })
      if (res.code === 0) {
        this.coreIndexData = res.data
      }
      this.modeLoading.coreIndexLoading = false
    },
    /**
             * 获取核心指标数据 激活率、设备活跃率、最常用功能、最常使用菜单、活跃情况
             * @returns {Promise<void>}
             * @private
             */
    async _getDeviceModeMenuWorkDetail (deviceCoreData) {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.functionUserLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/device/getDeviceModeMenuWorkDetail`,
        false), { params: params })
      if (res.code === 0) {
        this.coreIndexData = Object.assign(deviceCoreData, res.data)
      }
      this.modeLoading.functionUserLoading = false
    },
    /**
             * 获取 激活率/设备活跃率曲线图
             * @returns {Promise<void>}
             * @private
             */
    async _getpluginLaunchRate () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getpluginLaunchRate
      this.modeLoading.deviceActivationloading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginRegistActiveRate`,
        false), { params: params })
      if (res.code === 0) {
        this.deviceActivationData = res.data
      }
      this.modeLoading.deviceActivationloading = false
    },
    /**
             * 获取 插件启动曲线及趋势图
             * @returns {Promise<void>}
             * @private
             */
    async _getPluginLaunch () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getPluginLaunch
      this.modeLoading.pluginLaunchLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`/dataanalysis_iot/appplugin/getPluginLaunch`,
        false), { params: params })
      if (res.code === 0) {
        this.pluginLaunchData = res.data
      }
      this.modeLoading.pluginLaunchLoading = false
    },
    /**
       * 获取 使用时间点
       * @returns {Promise<void>}
       * @private
       */
    async _getPluginUsageTime () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getPluginUsageTime
      this.modeLoading.pluginUsageTimeLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginUsageTime`,
        false), { params: params })
      if (res.code === 0) {
        this.pluginUsageTimeData = res.data
      }
      this.modeLoading.pluginUsageTimeLoading = false
    },
    /**
       * 页面统计
       * @returns {Promise<void>}
       * @private
       */
    async _getPluginPageStatistics () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.pluginPageStatisticsLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`/dataanalysis_iot/appplugin/getPluginPageStatistics`, false), {
        params: params })
      if (res.code === 0) {
        this.pluginPageStatisticsData = res.data
      }
      this.modeLoading.pluginPageStatisticsLoading = false
    },
    /**
             * 获取 页面浏览图
             * @returns {Promise<void>}
             * @private
             */
    async _getPluginPageBrowse () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getPluginPageBrowse
      this.modeLoading.pluginPageBrowseLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginPageBrowse`, false),
        { params: params })
      if (res.code === 0) {
        this.pageBrowseData = res.data
      }
      this.modeLoading.pluginPageBrowseLoading = false
    },
    /**
             * 获取 APP功能使用数据
             * @returns {Promise<void>}
             * @private
             */
    async _getPluginModeData () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      this.modeLoading.menuBarChartLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginModeData`, false),
        { params: params })
      if (res.code === 0) {
        this._getPluginWorkTimeData(res.data)
      }
      this.modeLoading.menuBarChartLoading = false
    },
    /**
             * 获取 APP使用时段/时长
             * @returns {Promise<void>}
             * @private
             */
    async _getPluginWorkTimeData (modeData) {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getDeviceWorkTimeData
      this.modeLoading.timePointLoading = true
      let { data: res } = await this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginWorkTimeData`,
        false), { params: params })
      if (res.code === 0) {
        this.functionUserData.modeDataList = modeData.modeList
        this.functionUserData.timeDataList = res.data
      }
      this.modeLoading.timePointLoading = false
    },
    /**
             * 获取 页面浏览柱状及趋势图
             * @returns {Promise<void>}
             * @private
             */
    async _getPluginPageBrowseTendency () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getPluginPageBrowseTendency
      this.modeLoading.pluginPageBrowseTendencyLoading = true
      let { data: res } = await

      this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginPageBrowseTendency`, false), { params: params })
      if (res.code === 0) {
        this.pluginPageBrowseTendencyData = res.data.function_PVUV
      }
      this.modeLoading.pluginPageBrowseTendencyLoading = false
    },
    /**
       * 获取 时间段浏览柱状及趋势图
       * @returns {Promise<void>}
       * @private
       */
    async _getPluginTimeBrowseTendency () {
      let paramsArr = ['province_name', 'city_name', 'apptype', 'sn8', 'start_day', 'end_day']
      let params = this.paramsFilter(paramsArr)
      params.date_type = this.timeSelectMap._getPluginTimeBrowseTendency
      this.modeLoading.pluginTimeBrowseTendencyLoading = true
      let { data: res } = await
      this.$http.get(this.getApiUrl(`dataanalysis_iot/appplugin/getPluginTimeBrowseTendency`, false), { params: params })
      if (res.code === 0) {
        this.pluginTimeBrowseTendencyData = res.data.Num_of_active_users_by_hours
      }
      this.modeLoading.pluginTimeBrowseTendencyLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "~element-theme-chalk/src/common/var.scss";
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-content {
        background-color: #ffffff;
        margin-top: 20px;
        padding: 20px;
        border-radius: 5px;
        .title {
            .span-1 {
                font-size: 18px;
                color: #001737;
            }
            .span-2, .span-3 {
                font-size: 14px;
                color: #001737;
                margin-left: 10px;
            }
        }
    }
    .device-data_row {
        & ~ .device-data_row {
            margin-top: $gap-big;
        }
        .box-card {
            & + .box-card {
                margin-top: 0;
                margin-left: $gap-default;
            }
            .title {
                font-weight: bolder;
                font-size: 145%;
            }
        }
    }
    .device-data_row--filter {
        .filter-item {
            ::v-deep .el-input {
                @include el-input__grey;
            }
            &.el-date-editor {
                ::v-deep {
                    @include el-date-editor__grey;
                }
            }
            &:not(.el-date-editor) {
                width: 8em;
            }
            & ~ .filter-item {
                margin-left: $gap-default;
            }
        }
        .el-checkbox, .el-radio {
            margin-right: 0;
            @include el-date-editor__grey
        }
    }
    .device-data_row--survey {
        .box-card {
            .radio_data-range {
                ::v-deep .el-radio-button {
                    & ~ .el-radio-button {
                        margin-left: $gap-default;
                    }
                    .el-radio-button__inner {
                        border: none;
                    }
                    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                        color: $input-font-color;
                        background-color: $input-background-color;
                        box-shadow: none;
                    }
                }
            }
            .card-content {
                .data-item {
                    flex: auto;
                    &:not(:last-of-type) {
                        padding-right: 30px;
                    }
                    & ~ .data-item {
                        padding-left: 30px;
                        border-left: 1px solid $--border-color-base;
                    }
                    .item-row {
                        & ~ .item-row {
                            margin-top: $gap-small;
                        }
                    }
                    .num {
                        font-size: 150%;
                        font-weight: bolder;
                        color: $--color-primary;
                    }
                    .label {
                        font-size: 95%;
                        color: $--color-info;
                    }
                    .trend {
                        font-weight: bold;
                        .range {
                            font-weight: normal;
                            color: $--color-primary-light-1;
                        }
                    }
                }
            }
        }
    }
    .device-data_row--stage-trend {
    }
    .device-data_row--ratio {
        .box-card {
            flex: 1 1 50%;
        }
    }
    .device-data_row--retention {
        .index-btn-group {
            ::v-deep {
                .label {
                    @include style__grey;
                }

                .el-date-editor {
                    @include el-date-editor__grey;
                }
            }
        }
    }
</style>
